html {
  width: 100%;
  height: 100%;

  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
.blank {
  font-size: 0px;
  clear: both;
}

audio {
  z-index: 100;
  position: absolute;
}

#musicbox {
  background: url(../img/bofang.gif) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 20;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s all ease-in-out;
  .cont{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .bg-wrap{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .bgbox {
        background-color: #fff;
        position: absolute;
        width: 100%;
        background-size: 100%;
        height: 100%;
        float: left;
        transition: 2s transform linear;
      }
    }
  }
}

.meng {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.5;
  z-index: 2;
}


@keyframes movedown {
  0% {
    margin-top: -140px;
    opacity: 0;
  }

  100% {
    margin-top: -92px;
    opacity: 1;
  }
}
.content1{
  .bgbox1{
    transform: translateX(-100%);
    background-repeat: no-repeat;
    &.bgbox11{
      background-image: url("../img/bg (1).jpg");
    }
    &.bgbox12{
      background-image: url("../img/bg (2).jpg");
    }
    &.bgbox13{
      background-image: url("../img/bg (3).jpg");
    }
    &.bgbox14{
      background-image: url("../img/bg (4).jpg");
    }
    &.bg-pre{
      transform: translateX(0);
      z-index: 1;
    }
    &.bg-move{
      transform: translateX(100%);
      z-index: 1;
    }
  } 

  .jieshao {
    position: absolute;
    width: 600px;
    height: 186px;
    top: 50%;
    left: 50%;
    margin-top: -92px;
    margin-left: -300px;
    z-index: 3;
    text-align: center;
    color: #fff;
    animation: movedown 1s backwards;
    backface-visibility: hidden;
    h1 {
      font-size: 30px;
      line-height: 50px;
    }
    p {
      font-size: 25px;
      line-height: 50px;
      position: relative;
    }
    #to-cont2 {
      border: 1px solid #fff;
      width: 200px;
      height: 30px;
      padding: 5px 20px;
      margin: 10% auto;
      font-size: 25px;
      line-height: 30px;
      cursor: pointer;
    }
    .imgbox {
      width: 250px;
      margin: 20px auto;
      img {
        width: 50px;
        height: 50px;
        cursor: pointer;
      
        margin-top: 0;
        &:first-child {
          margin-right: 75px;
        }
      }
    }
  }
}

.content2 {
  position: relative;
  
  #to-cont1{
    position: absolute;
    left: 20px;
    top: 20px;
    color: white;
    border-bottom: 1px solid #fff;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    z-index: 5;
  }
  .bgbox2{
    transform: translateX(100%);
    background-repeat: no-repeat;
    &:nth-child(1){
      background-image: url("../img/bg (5).jpg");
    }
    &:nth-child(2){
      background-image: url("../img/bg (6).jpg");
    }
    &:nth-child(3){
      background-image: url("../img/bg (7).jpg");
    }
    &:nth-child(4){
      background-image: url("../img/bg (8).jpg");
    }
    &.bg-pre{
      transform: translateX(0);
      z-index: 1;
    }
    &.bg-move{
      transform: translateX(-100%);
      z-index: 1;
    }
  }
  .stail {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 500px;
    margin-top: -250px;
    margin-left: -500px;
    z-index: 3;
    width: 1000px;
    text-align: center;
    .nav {
      width: 60px;
      font-size: 25px;
      color: white;
      position: absolute;
      background: red;
      top: 50%;
      left: 0;
      #caidan {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        border: 1px solid white;
        position: absolute;
        z-index: 50;
        transition: 1s;
        cursor: pointer;
      }
      li {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        border: 1px solid white;
        position: absolute;
        top: 0;
        left: 0;
        transition: 1s ease-in-out;
        cursor: pointer;
        opacity: 0;
      }

    }
    .nav_content {
      float: right;
      width: 690px;
      height: 500px;
      background: url(../img/xinzhi.png) no-repeat;
      background-size: 100%;
      li {
        position: absolute;
        top: 200px;
        right: 170px;
        width: 380px;
        opacity: 0;
        transition: 1s ease-in-out;
        &.li_active {
          top: 160px;
          opacity: 1;
        }
      }
    }
  }
}